<template>
  <div class="app-container">
    <el-card style="margin-bottom: 10px; font-weight: 800; width: 100%"
      >用户管理</el-card
    >
    <el-form
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      class="formbox whitebg m_20"
    >
      <el-form-item prop="type">
        <el-select
          v-model="queryParams.type"
          size="small"
          placeholder="请选择状态"
          clearable
          style="width: 136px; height: 30px"
          @change="handleQuery"
        >
          <el-option
            v-for="dict in typeList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.user_login"
          style="width: 136px"
          placeholder="姓名/电话/QQ"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <template slot-scope>
          <div class="search" @click="handleQuery">
            <svg-icon
              class="searchIcon"
              class-name="feather-search"
              icon-class="feather-search"
            />
          </div>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button
          type="warning"
          style="
            color: black;
            font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
          "
          @click="userdialog = true"
          >添加新成员</el-button
        >
      </el-form-item>
    </el-form>
    <div class="tablebox m_20">
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        ref="tableList"
        class="whitetable"
      >
        <el-table-column label="序号" prop="id">
          <template slot-scope="scope">
            <span>{{
              (queryParams.page - 1) * queryParams.num + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" >
          <template slot-scope="scope">
            <span>{{ scope.row.user_login }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.user_status == 1">
              <span class="primarydot" />正常
            </div>
            <div v-else><span class="primarydot reddot" />禁用</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="操作"
          fixed="right"
          width="260"
        >
          <template slot-scope="scope">
            <div class="flex btnflex">
              <div
                class="commhover btn_textblue mb_10"
                @click="handlePass(scope.row, 1)"
              >
                编辑
              </div>
              <span style="padding: 0 10px; width: 1px; height: 100%" />
              <div
                style="padding: auto 5px; text-decoration: underline"
                class="commhover btn_textred mb_10"
                @click="handlePass(scope.row, 2)"
              >
                重置密码
              </div>
              <span style="padding: 0 10px; width: 1px; height: 100%" />
              <div
                v-if="scope.row.user_status == 1"
                style="padding: auto 5px"
                class="commhover btn_textblue mb_10"
                @click="handleStatus(scope.row, scope.row.user_status)"
              >
                设为无效
              </div>
              <div
                v-else
                class="commhover btn_textblue mb_10"
                @click="handleStatus(scope.row, scope.row.user_status)"
              >
                应用
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.num"
        @pagination="getList"
      />
    </div>
    <!-- <el-dialog  title="添加新成员" :close-on-click-modal="false" :visible.sync="userdialog"  width="620px" append-to-body>
      <user-dialog v-if="userdialog" :type="type"  :user="rowinfo" @close="handleClose" />
    </el-dialog> -->
    <el-drawer
      title="新增用户"
      class="addArawer"
      size="453px"
      modal
      :visible.sync="userdialog"
      direction="rtl"
      :before-close="btnHandleClose"
    >
      <user-dialog v-if="userdialog" @close="handleClose" />
    </el-drawer>

    <!-- <el-dialog title="编辑用户信息" :close-on-click-modal="false" :visible.sync="passdialog" width="520px" append-to-body>
      <pass-dialog v-if="passdialog" :user="rowinfo" @close="handlePassClose" />
    </el-dialog> -->
    <el-drawer
      :title="type == 2 ? '重置密码' : '编辑信息'"
      :type="type"
      size="453px"
      modal
      class="mydrawer"
      :visible.sync="passdialog"
      direction="rtl"
      :before-close="btnHandleClose"
    >
      <pass-dialog v-if="passdialog" :user="rowinfo" @close="handlePassClose" />
    </el-drawer>
  </div>
</template>

<script>
import PartComp from "@/components/PartComp";
import UserDialog from "./components/UserDialog.vue";
import PassDialog from "./components/PassDialog.vue";
import { getUserList, userOpen, userBan } from "@/api/user";
export default {
  components: {
    UserDialog,
    PassDialog,
    PartComp,
  },
  data() {
    return {
      // 自定义状态
      typeList: [
        { name: "禁用", id: 0 },
        { name: "正常", id: 1 },
        // { name: '未验证', id: 2 }
      ],
      queryParams: {
        page: 1,
        num: 10,
        type: "", //状态 是否为 禁用和开放
        user_login: "",
      },
      listLoading: false, // 加载效果
      list: [],
      total: 0, //总条数
      userdialog: false, //添加用户抽屉
      rowinfo: null, //用户信息
      passdialog: false, //修改用户密码抽屉
      type: null,
    };
  },

  created() {
    this.getList();
  },

  methods: {
    // 获取所有数据，赋值 页数和每页数量
    getList() {
      this.listLoading = true;
      const params = {
        page: this.queryParams.page,
        num: this.queryParams.num,
      };
      if (this.queryParams.user_login) {
        params.user_login = this.queryParams.user_login;
      }
      if (this.queryParams.type || this.queryParams.type === 0) {
        params.status = this.queryParams.type;
      }
      getUserList(params)
        .then((res) => {
          this.listLoading = false;
          this.list = res.data.list;
          this.total = res.data.count;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    async handleQuery() {
      // 筛选 状态  / 搜索按钮
      this.queryParams.page = 1;
      await this.getList();
      // this.$nextTick(()=>{
      //      this.$refs.tableList.data.length==0? this.$message.error('无筛选结果'): this.$message.success(`筛选成功${this.$refs.tableList.data.length}条数据`)
      // })
    },

    // resetQuery() {
    //   this.resetForm('queryForm')
    //   this.handleQuery()
    // },

    handleAdd() {
      this.userdialog = true;
    },

    // 叉叉按钮
    btnHandleClose() {
      this.$confirm("确认关闭？").then(() => {
        this.userdialog = false;
        this.passdialog = false;
      });
    },
    // 添加按钮
    handleClose(type) {
      this.getList();
      this.userdialog = type;
      this.passdialog = type;
    },

    // // 编辑按钮
    // handleEdit(row) {
    //   // 编辑时传数据
    //   this.rowinfo = row
    //   // this.passdialog = true
    // },

    //
    handlePassClose(status) {
      this.getList();
      this.passdialog = status;
    },

    handleStatus(row, type) {
      console.log(type);
      const info = type == 0 ? "启用" : "禁用";
      this.$confirm("确定" + info + "该用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (info == "禁用") {
            // 停用
            console.log("禁用");
            userBan({ id: row.id }).then((res) => {
              console.log(res.code + "-----禁用数据");
              if (res.code === 1) {
                this.$message.success("禁用成功");
                this.getList();
              }
            });
          } else {
            // 启用
            userOpen({ id: row.id }).then((res) => {
              console.log(res.code + "----------启用");
              if (res.code === 1) {
                this.$message.success("启用成功");
                this.getList();
              }
            });
          }
        })
        .catch(() => {});
    },
    // 重置密码 /编辑按钮
    handlePass(row, type) {
      this.type = type;
      this.rowinfo = row;
      this.passdialog = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.formbox {
  border-radius: 5px;
  padding: 15px 15px 0 15px;
  // width: 100%;
}

.primarydot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  background-color: #1168eb;
}

.reddot {
  background-color: #e63737;
}

.search {
  width: 30px;
  margin-top: 2px;
  padding-left: 8px;
  height: 30px;
  background: #9fabf8;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
}

.searchIcon {
  margin-bottom: 3px;
}

.btnflex {
  .line {
    display: inline-block;
    margin: 0 10px;
  }
}

::v-deep .el-form-item:last-child .el-form-item__content {
  position: absolute;
  right: 27px;
}
</style>
